import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface PiePatternProps {
    chartId?: string;
    width?: string;
    height?: string;
    title?: object;
    seriesData?: {value: number, name: string}[];
}

const piePatternSrc =
    '';
const bgPatternSrc =
    '';
const piePatternImg = new Image();
piePatternImg.src = piePatternSrc;
const bgPatternImg = new Image();
bgPatternImg.src = bgPatternSrc;

@customElement('lit-pie-pattern')
export class LitPiePattern extends LitElement {
    @property({type: String}) chartId: string = 'lit-pie-pattern-chart';
    @property({type: String}) width: string = '600px';
    @property({type: String}) height: string = '400px';
    @property({type: Object}) title: any = {
        text: '饼图纹理',
        textStyle: {
            color: '#235894'
        }
    };
    @property({type: Object}) seriesData: {value: number, name: string}[] = [
        {value: 1048, name: 'Search Engine'},
        {value: 735, name: 'Direct'},
        {value: 580, name: 'Email'},
        {value: 484, name: 'Union Ads'},
        {value: 300, name: 'Video Ads'}
    ];

    option: echarts.EChartsOption = {
        backgroundColor: {
            image: bgPatternImg,
            repeat: 'repeat'
        },
        title: this.title,
        tooltip: {},
        series: [
            {
                name: 'pie',
                type: 'pie',
                selectedMode: 'single',
                selectedOffset: 30,
                clockwise: true,
                label: {
                    fontSize: 18,
                    color: '#235894'
                },
                labelLine: {
                    lineStyle: {
                        color: '#235894'
                    }
                },
                data: this.seriesData,
                itemStyle: {
                    opacity: 0.7,
                    color: {
                        image: piePatternImg,
                        repeat: 'repeat'
                    },
                    borderWidth: 3,
                    borderColor: '#235894'
                }
            }
        ]
    };

    static styles = style;

    updated() {
        this.option.title = this.title;
        (this.option.series as any)[0].data = this.seriesData;
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width: ${this.width}; height: ${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-pie-pattern': LitPiePattern;
    }
}